import React, { Suspense, lazy } from "react";
import { HashRouter as Router, Switch as RouteSwitch } from "react-router-dom";

import AuthRoute from "./AuthRoute";
import ModalRender from "@src/components/ModalRender";

const Layout = lazy(() => import("@src/components/Layout"));

const NotFound = lazy(() => import("@src/pages/NotFound"));

const MyRouter = (props) => (
  <Router>
    <Suspense
      fallback={
        <div className="pageLoadingFallBack">
          <div className="loginMask"></div>
          <div className="pageLoadingFallBack-msg">正在拼命加载</div>
        </div>
      }
    >
      <Layout>
        <ModalRender>
          <RouteSwitch>
            <AuthRoute extra path="/" component={NotFound} />
          </RouteSwitch>
        </ModalRender>
      </Layout>
    </Suspense>
  </Router>
);

export default MyRouter;
